<template>
    <view class="page">
        <view class="head-back">
            <view class="back" @click="onBack">
                <text></text>
            </view>
            <view class="title">
                <text>签到领福利</text>
            </view>
            <!-- #ifdef APP-PLUS || H5 -->
            <view class="more-icon" @click="is_show_share_box = true">
                <view class="icon-list">
                    <text class="lg text-gray cuIcon-share"></text>
                </view>
            </view>
            <!-- #endif -->
        </view>
        <view class="headBottom">
            <view class="head box">
                <!-- @click="isRule = true" -->
                <view class="rule" v-if="isLogin">
                    <text @click="toPage('/pagesA/my/pointsRecord')">积分记录</text>
                    <view class="line"></view>
                    <text @click="toPage('/pagesA/my/inviteRecord')">邀请记录</text>
                </view>
                <view class="num" v-if="num <10">
                    <text>0</text>
                    <text>0</text>
                    <text>{{num}}</text>
                </view>
                <view class="num" v-else-if="num >=10 && num<100">
                    <text>0</text>
                    <text>{{String(num).substring(0,1)}}</text>
                    <text>{{String(num).substring(1,2)}}</text>
                </view>
                <view class="num" v-else-if="num >=100">
                    <text>{{String(num).substring(0,1)}}</text>
                    <text>{{String(num).substring(1,2)}}</text>
                    <text>{{String(num).substring(2,3)}}</text>
                </view>
            </view>
            <!-- 签到 -->
            <view class="Signin-data">
                <view class="day-list box">
                    <view class="list" v-for="item,index in data.lists" :key="index" :class="{'action' : item.is_sign==1}">
                        <view class="circle">
                            <view class="wai">
                                <view class="nei" v-if="index < 6">
                                    <!-- <text class="p">+{{(index+1)*10}}</text> -->
                                    <text class="p" v-if="item.is_sign == 1">+{{item.reality}}</text>
                                    <text class="p" v-if="item.is_sign == 0">+{{item.should}}</text>
                                </view>
                                <text v-else class="lg text-gray cuIcon-presentfill"></text>
                            </view>
                        </view>
                        <view class="day">
                            <text v-if="item.is_sign==1">已签</text>
                            <text v-else>{{index+1}}天</text>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 头部背景 -->
            <template v-if="isLogin">
                <view class="head-bg">
                    <view class="integral-balance">
                        <view class="integral" @click="onIntegral" :class="{'action' : data.is_sign_today==1}">
                            <text class="lg text-gray cuIcon-edit"></text>
                            <text class="btn">{{data.is_sign_today==0?'立即签到':'已签到'}}</text>
                        </view>
                    </view>
                </view>
                <view class="invitation-data box">
                    <view class="signin-title">
                        <view class="title">
                            <text>签到规则</text>
                        </view>
                    </view>
                    <view class="invitation-show">
                        <rich-text class="p2" :nodes="data.sign_rule"></rich-text>
                    </view>
                </view>
            </template>
            <!-- 邀请新人 -->
            <!-- <view class="invitation-data box">
                <view class="signin-title">
                    <view class="title">
                        <text>任务列表</text>
                    </view>
                </view>
                <view class="invitation-show">
                    <view class="txt">
                        <image :src="$imgUrl+'my/day.png'" mode="widthFix" class="pic"></image>
                        <view class="item">
                            <view class="title-btn">
                                <view class="title">
                                    <text class="bt">每日访问</text>
                                    <text class="ji">赠送一张优惠券</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="btn">
                        <text>去完成</text>
                    </view>
                </view>
                <view class="invitation-show">
                    <view class="txt">
                        <image :src="$imgUrl+'my/eye.png'" mode="widthFix" class="pic"></image>
                        <view class="item">
                            <view class="title-btn">
                                <view class="title">
                                    <text class="bt">每日访问</text>
                                    <text class="ji">赠送一张优惠券</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="btn finish">
                        <text>已完成</text>
                    </view>
                </view>
                <view class="invitation-show">
                    <view class="txt">
                        <image :src="$imgUrl+'my/shopCar.png'" mode="widthFix" class="pic"></image>
                        <view class="item">
                            <view class="title-btn">
                                <view class="title">
                                    <text class="bt">每日访问</text>
                                    <text class="ji">赠送一张优惠券</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="btn">
                        <text>去完成</text>
                    </view>
                </view>
            </view> -->
            <!-- 签到提示弹窗 -->
            <view class="sigin-hint">
                <view class="cu-modal" :class="{'show':isSignin}">
                    <view class="cu-dialog">
                        <view class="cu-bar bg-white justify-end">
                            <view class="content">签到成功</view>
                            <view class="action">
                                <text class="cuIcon-close text-red" @click="isSignin = false"></text>
                            </view>
                        </view>
                        <view class="sigin-content">
                            <view class="icon">
                                <text class="iconfont icon-signin"></text>
                            </view>
                            <view class="title">
                                <view>恭喜您，连续签到<text>{{ data.duration_days }}</text>天，获得<text>{{integral}}</text>积分</view>
                            </view>
                            <view class="hint">
                                <text>连续签到7天可获得额外奖励</text>
                            </view>
                            <view class="btn" @click="isSignin = false">
                                <text>我知道了</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 规则说明弹窗 -->
            <view class="rule-win">
                <view class="cu-modal" :class="{'show':isRule}">
                    <view class="cu-dialog">
                        <view class="cu-bar bg-white justify-end">
                            <view class="content">规则说明</view>
                            <view class="action">
                                <text class="cuIcon-close text-red" @click="isRule = false"></text>
                            </view>
                        </view>
                        <view class="rule-content">
                            <scroll-view scroll-y="true" style="height: 745rpx;">
                                <rich-text class="p2" :nodes="data.sign_rule"></rich-text>
                            </scroll-view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 分享弹窗 -->
        <share-column @share="share" :provider_list="provider_list" :is_show_share_box="is_show_share_box" @hideColumn="is_show_share_box = !is_show_share_box" />
    </view>
</template>

<script>
import { getSign, setSign } from "@/api/my/index.js"
export default {
    data() {
        return {
            isSignin: false,
            // 规则
            isRule: false,
            is_show_share_box: null,
            provider_list: [
                {
                    "name": "微信好友",
                    "url": "https://yl.weilankangyang.com/static/mini_program/share_icon/weixin.png",
                    provider: "weixin",
                },
                {
                    "name": "微信朋友圈",
                    "url": "https://yl.weilankangyang.com/static/mini_program/share_icon/pengyouquan.png",
                    provider: "weixin"
                },
                {
                    "name": "QQ",
                    "url": "https://yl.weilankangyang.com/static/mini_program/share_icon/QQ.png",
                    provider: "qq"
                },
                // {
                //     "name": "微博",
                //     "url": "https://yl.weilankangyang.com/static/mini_program/share_icon/weibo.png",
                //     provider: "sinaweibo"
                // }
            ],
            num: 0,
            $imgUrl: this.$imgUrl,
            data: {},
            integral: 0,
            isLogin: uni.getStorageSync('token') ? true : false,
        };
    },
    onLoad() {
    },
    onShow() {
        if (this.isLogin) {
            this.getList()
        }
    },
    methods: {
        getList() {
            getSign().then((res) => {
                this.data = res.data
                this.data.lists = Object.keys(this.data.lists).map(key => this.data.lists[key])
                this.num = this.data.duration_days
                this.data.sign_rule = this.data.sign_rule.replace(/\<img/g, "<img style='max-width: 100%;;height: auto;display: block;'")
                console.log(this.data.lists, "data.lists")
                console.log(this.data, "this.data ")
            })
        },
        /**
        * 返回点击
        */
        onBack() {
            uni.navigateBack();
        },
        /**
         * 签到点击
         */
        onIntegral() {
            if (this.data.is_sign_today == 0) {
                if (this.data.duration_days > 0) {
                    let arr = this.data.lists;
                    let index = arr.findIndex((e) => e.is_sign == 1)
                    console.log(index)
                    this.integral = this.data.lists[index].reality
                } else {
                    this.integral = this.data.lists[0].should
                }
                this.isSignin = true;
                setSign().then((res) => {
                    if (res.code == 1) {
                        this.getList()
                        this.isSignin = true;
                    }
                })
            }
        },

        share(type, provider) {
            console.log(type, provider, 1111)
            let scene = provider == "weixin" ? (type == '微信好友' ? 'WXSceneSession' : 'WXSenceTimeline') : ''
            //执行分享的逻辑
            let that = this
            let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
            let curRoute = routes[routes.length - 1].$page.fullPath // 获取当前页面路由，也就是最后一个打开的页面路由
            uni.share({
                provider: provider, //分享服务提供商（即weixin|qq|sinaweibo）
                scene: scene, //场景，可取值参考下面说明。
                type: 0, //分享形式
                href: 'http://dwy.dangwuyou.cn/pages/news/detail?id=1423578123479437314' + '&type=1', //跳转链接
                title: "签到领福利", //分享内容的标题
                summary: "大学生毕业以后，户口、档案都要及时处理。户口因为在日常生活中经常用到，所以不容易被忽视。", //分享内容的摘要
                imageUrl: 'http://admin.renshewuyou.com/gzh/static' + "", //图片地址
                success: function (res) {
                    that.posters = false; //成功后关闭底部弹框
                },
                fail: function (err) {
                    uni.showToast({
                        title: '分享失败',
                        icon: 'none',
                        duration: 2000
                    })
                    that.posters = false;
                }
            })
        },
        toPage(url) {
            uni.navigateTo({
                url: url
            });
        },
    }
}
</script>

<style scoped lang="scss">
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
/* 顶部返回 */
.head-back {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100rpx;
  background: linear-gradient(to bottom right, #2e996f, #3f99ab);
  /* #ifdef APP-PLUS */
  height: calc(100rpx + var(--status-bar-height));
  padding-top: var(--status-bar-height);
  /* #endif */
  /* #ifdef MP-WEIXIN  */
  height: calc(100rpx + var(--status-bar-height));
  padding-top: 20rpx;

  /* #endif */
  .back {
    position: absolute;
    left: 0;
    top: 0;
    /* #ifdef APP-PLUS */
    padding-top: var(--status-bar-height);
    /* #endif */
    /* #ifdef MP-WEIXIN */
    padding-top: 20rpx;
    /* #endif */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100rpx;
    height: 100%;

    text {
      width: 20rpx;
      height: 20rpx;
      border-left: 2rpx solid #ffffff;
      border-bottom: 2rpx solid #ffffff;
      transform: rotate(45deg);
    }
  }

  .title {
    display: flex;
    align-items: center;

    text {
      font-size: 28rpx;
      color: #ffffff;
    }
  }

  .more-icon {
    position: absolute;
    right: 0;
    top: 0;
    /* #ifdef APP-PLUS */
    right: 0rpx;
    padding-top: var(--status-bar-height);
    /* #endif */
    /* #ifdef MP-WEIXIN */
    right: 220rpx;
    padding-top: 20rpx;
    /* #endif */
    display: flex;
    align-items: center;
    height: 100%;

    .icon-list {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80rpx;
      height: 100%;
      text {
        font-size: 38rpx;
        color: #ffffff;
      }
    }
  }
}

.head {
  height: 320rpx;
  border-radius: 20rpx;
  background: url("https://yl.weilankangyang.com/static/mini_program/my/signD.png")
    no-repeat center center;
  background-size: cover;
  margin: 30rpx auto 0;
  position: relative;
  .rule {
    width: 320rpx;
    height: 50rpx;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 25rpx 0px 0px 25rpx;
    position: absolute;
    top: 26rpx;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text {
      font-size: 24rpx;
      color: #ffffff;
      line-height: 50rpx;
      //   background: gold;
    }
    .line {
      width: 2rpx;
      height: 35rpx;
      margin: 0 20rpx;
      background-color: #fff;
    }
  }
  .num {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 143rpx;
    left: 50rpx;
    text {
      //   width: 60rpx;
      padding: 15rpx;
      border-radius: 8rpx;
      background-color: #f8f8f8;
      font-size: 60rpx;
      color: #2e9970;
      margin-right: 10rpx;
    }
  }
}
.head-bg {
  .integral-balance {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20rpx 0;
    .integral {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 690rpx;
      height: 80rpx;
      background-image: linear-gradient(0deg, #4199b2 0%, #2d996b 100%),
        linear-gradient(#ffd041, #ffd041);
      background-blend-mode: normal, normal;
      border-radius: 40rpx;
      text {
        color: #ffffff;
      }
      .btn {
        font-size: 30rpx;
        padding-left: 20rpx;
      }
    }
    .action {
      background-color: #f6f6f6;
      opacity: 0.7;
      // color: #959595;
    }
  }
}
/* 签到 */
.Signin-data {
  width: 100%;
  background-color: #ffffff;
  border-radius: 20rpx;

  .day-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;
    .list {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 18rpx 9rpx;
      .circle {
        .wai {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 72rpx;
          height: 72rpx;
          border-radius: 100%;
          background-color: #ffda69;
          .nei {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 52rpx;
            height: 52rpx;
            border-radius: 100%;
            background-color: #ff8c44;
            .p {
              font-size: 24rpx;
              color: #ffe493;
            }
          }
          .cuIcon-presentfill {
            font-size: 50rpx;
            color: #ff7462;
          }
        }
      }
      .day {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 8rpx;
        text {
          font-size: 26rpx;
          color: #999999;
        }
      }
    }
    .action {
      background-color: #cef1e4;
      border-radius: 10rpx;
      .circle {
        // text { // color: $base; // font-weight: bold; // }
      }
    }
  }
}
/* 邀请新人 */
.invitation-data {
  padding: 20rpx 0;
  .signin-title {
    display: flex;
    align-items: center;
    .title {
      display: flex;
      align-items: center;
      text {
        color: #222222;
        font-size: 28rpx;
        font-weight: bold;
      }
    }
  }
  .invitation-show {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    border-radius: 20rpx;
    padding-top: 10rpx;
    .txt {
      display: flex;
      align-items: center;
      .pic {
        width: 60rpx;
      }
      .item {
        padding-left: 20rpx;
        .title-btn {
          display: flex;
          justify-content: space-between;
          width: 100%;
          height: 80rpx;
          .title {
            text {
              display: block;
            }
            .bt {
              color: #222222;
              font-size: 30rpx;
              font-weight: bold;
            }
            .ji {
              font-size: 24rpx;
              color: #2e996e;
            }
          }
        }
      }
    }
    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 160rpx;
      height: 50rpx;
      background-color: $base;
      border-radius: 60rpx;
      text {
        color: #ffffff;
        font-size: 24rpx;
      }
    }
    .finish {
      background-color: #cef1e4;
      text {
        color: #2e9970;
      }
    }
    rich-text {
      line-height: 60rpx;
    }
  }
}
/* 签到弹窗 */
.sigin-hint {
  .sigin-content {
    width: 100%;
    height: 500rpx;
    background-color: #ffffff;
    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 200rpx;
      text {
        color: $base;
        font-size: 160rpx;
      }
    }
    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100rpx;
      view {
        font-size: 30rpx;
        font-weight: bold;
        text {
          color: $base;
        }
      }
    }
    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80%;
      height: 60rpx;
      background: linear-gradient(to right, $base, $change-clor);
      border-radius: 60rpx;
      box-shadow: 0 10rpx 10rpx $base;
      margin: 40rpx auto 0;
      text {
        font-size: 26rpx;
        color: #ffffff;
      }
    }
  }
}
/* 规则说明弹窗 */
.rule-win {
  /deep/.cu-dialog {
    max-height: 80%;
  }
  .rule-content {
    padding: 20rpx 4%;
    text-align: left;
    scroll-view {
      .p2 {
        font-size: 26rpx;
        color: #555555;
        text-align: left;
        line-height: 50rpx;
        overflow-y: auto;
      }
    }
  }
}
</style>
